<template>
  <!-- 歌曲卡片 -->
  <div class="songCardContainer pointer">
    <!-- 封面 -->
    <div class="cover">
      <img v-lazy="cover + '?param=70y70'" />
    </div>
    <!-- 歌曲信息 -->
    <div class="songInfo textEllipsis">
      <div class="songName textEllipsis" :title="songName">{{ songName }}</div>
      <div class="singers textEllipsis">
        <span v-for="(singer, index) in singers" :key="singer.id">
          {{ singer.name }}
          <span v-if="index !== singers.length - 1">、</span>
        </span>
      </div>
    </div>
    <!-- 播放 -->
    <div class="play">
      <play-one theme="filled" size="24" fill="#409EFF" class="iconfont" />
    </div>
  </div>
</template>

<script name="SongCard">
import { defineComponent } from 'vue';
import { PlayOne } from '@icon-park/vue-next';

export default defineComponent({
  name: 'SongCard', // 歌曲卡片
  components: { PlayOne },
  props: {
    cover: {
      type: String,
      default: '',
    },
    songName: {
      type: String,
      default: '',
    },
    singers: {
      type: Array,
      default: () => [],
    },
  },
});
</script>

<style lang="scss" scoped>
// 歌曲卡片
.songCardContainer {
  width: 300px;
  height: 70px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  transition: background-color 0.3s;

  &:hover {
    background-color: #dff6f0;
  }

  // 封面
  .cover {
    width: 70px;
    height: 70px;
    overflow: hidden;
    border-radius: 10px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  // 歌曲信息
  .songInfo {
    width: 170px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 10px;

    div {
      text-overflow: ellipsis;
      overflow: hidden;
      text-wrap: nowrap;
    }

    .songName {
      color: #333;
      font-size: 16px;
    }

    .singers {
      color: #999;
      font-size: 15px;
    }
  }

  // 播放
  .play {
    width: 50px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
